<template>
  <div class="db_dialog">
    <el-form
      ref="formmodel"
      class="ydbform"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="110px"
    >
      <el-form-item label="模型名称" prop="modelName">
        <el-input
          class="bin_input"
          v-model="form.modelName"
          placeholder="请输入模型名称"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div class="edit_btns">
      <el-button class="bin_button" size="small" @click="cancelBtn">
        取消
      </el-button>
      <el-button class="bin_button" size="small" @click="goLinkFn">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      rules: {
        modelName: [
          { required: true, message: "请输入模型名称", trigger: "blur" },
        ],
      },
      form: {
        modelName: "",
      },
    };
  },

  watch: {
    name: {
      // 深度观察监听
      deep: true,
      immediate: true,
      handler: function (val) {
        this.form.modelName = this.name;
      },
    },
  },
  methods: {
    cancelBtn() {
      this.$emit("cancel");
    },
    goLinkFn() {
      this.$refs.formmodel.validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form));
          this.$emit("confirm", form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.db_dialog {
  .el-dialog__body {
    padding: 0;
  }
  .ydbform {
    width: 400px;
    margin: 0 auto;
  }
  .edit_btns {
    margin-top: 50px;
    display: flex;
    align-self: center;
    justify-content: center;
  }
  ::v-deep .el-form--label-left .el-form-item__label {
    color: #fff;
  }
}
</style>
